.sidebar-container {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 50px;
  height: calc(100% - 50px);
  transition: width .3s;
  box-shadow: 2px 5px 8px rgba(0, 21, 41, .35);
  z-index: 1000;

  .el-scrollbar {
    height: calc(100% - 50px);

    .is-horizontal {
      display: none;
    }

    .is-vertical {
      right: 0;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__view {
      height: 100%;
    }
  }

  .el-menu {
    border: none;
    width: 100%;
    height: 100%;

    .el-menu-item, .el-submenu__title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }
}

// sidebar opened
.open {
  .sidebar-container {
    width: 200px !important;
  }

  .layout-wrapper {
    margin-left: 200px;
  }
}

// sidebar hided
.hide {
  .sidebar-container {
    width: 54px !important;
  }

  .layout-wrapper {
    margin-left: 54px;
  }

  .el-tooltip,
  .el-submenu__title {
    padding: 0 !important;
  }

  .menu-item {
    .menu-icon {
      margin-left: 20px;
    }

    span,
    &>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
      display: none;
    }
  }
}

// mobile device
.mobile {
  .layout-wrapper {
    margin-left: 0;
  }

  .sidebar-container {
    top: 0;
    width: 200px !important;
    height: 100%;
    transition: transform .3s;
  }

  &.hide {
    .sidebar-container {
      transform: translateX(-100%);
    }
  }
}

// fixed reloading transition style or device changed
.withoutAnimation {
  .sidebar-container,
  .layout-wrapper {
    transition: none !important;
  }
}